<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
	String path = request.getContextPath();
	String pathfile = path+"/view";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Lexy - 个人博客 </title>
	
    
    
   	<link href="<%=pathfile %>/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=pathfile %>/bac/css/font-awesome.min.css" rel="stylesheet">
    <link href="<%=pathfile %>/bac/css/animate.css" rel="stylesheet">
    <link href="<%=pathfile %>/bac/css/style.css" rel="stylesheet">
    
    <style type="text/css">
    	body{font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;}
    	/* ,"STXinwei" */
    	.folder-list li a {
		    color: #666666;
		    display: block;
		    padding: 10px 0;
		    font-size: 15px;
		    line-height:30px;
		}


		.layout-top{height:70px;line-height: 35px; }
		.blog_tit_img{height:auto;width:100%;max-height:200px; padding:0px 2px ; overflow:hidden ;border-radius: 5px;}
    	.blog_tit_img img{width:100%;}
    	.margin-top{margin-top: 5px ;     line-height: 2;}
    	.block-hide{display: none}
    	.sk-spinner-three-bounce div{background-color: #FFFFFF;}
    </style>
    
    
</head>
<body class=" gray-bg top-navigation">
	<div id="wrapper"  >
		<div id="page-wrapper" class="gray-bg">
			<div class="row border-bottom white-bg navbar-fixed-top">
				<nav class="navbar navbar-static-top " role="navigation">
					<div class="navbar-header" style="width:100%;height:70px">
					    <!-- <button style="height:70px" aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
					        <i class="fa fa-reorder"></i>
					    </button> -->
					    <!-- <ul class="nav navbar-top-links navbar-right layout-top"> -->
                        <ul class="nav navbar-top-links navbar-right">
                        
                        	<%-- <c:if test="${sessionScope.user!=null }">
			                 	<ul class="nav navbar-top-links navbar-left layout-top">
			                 		<li><span><img alt="image" class="img-circle" src="img/profile_small.jpg" /></span>
			                                <span class="clear">
			                               <span class="block m-t-xs"><strong class="font-bold">Beaut-zihan</strong></span>
			                                </span>
			                 		</li>
			                 	</ul>
                       		</c:if> --%>
                        	<c:if test="${sessionScope.user==null }">
		                     <li>
                         		<a id="sgin-in-model" class="layout-top"  >
		                            <span >
		                             <i class="fa fa-sign-in"></i> 登录
		                            </span>
	                            </a>
	                         </li>
                        	</c:if>
                        	<c:if test="${sessionScope.user!=null }">
                        			<li class="dropdown">
			                            <a class="dropdown-toggle count-info layout-top" data-toggle="dropdown" href="#">
			                                <i class="fa fa-user"></i> ${sessionScope.user.user_name}
			                            </a>
                        			<ul class="dropdown-menu dropdown-alerts dropdown-list">
	                                <li>
	                                    <a href="-Hplus-v.4.1.0/mailbox.html">
	                                        <div>
	                                            <i class="fa fa-envelope fa-fw"></i> 设置
	                                        </div>
	                                    </a>
	                                </li>
	                                <li class="divider"></li>
	                                <li>
	                                    <a href="-Hplus-v.4.1.0/profile.html">
	                                        <div>
	                                            <i class="fa fa-qq fa-fw"></i> 个人信息
	                                        </div>
	                                    </a>
	                                </li>
	                                <li class="divider"></li>
	                                <li>
	                                    <div class="text-center link-block">
	                                        <a class="J_menuItem" href="" data-index="89">
	                                            <strong>查看所有 </strong>
	                                            <i class="fa fa-angle-right"></i>
	                                        </a>
	                                    </div>
	                                </li>
	                            </ul>
                        		</li>
                        		<li>
		                       	 	<a id="sgin-out" class="layout-top"  >
			                            <span>
			                             <i class="fa fa-sign-out"></i> 退出
			                            </span>
			                        </a>
                        		</li>
                        	</c:if>
		                 </ul>
					</div>
					
					
				</nav>
				
			</div>
		</div>
	</div>
	<div id="wrapper wrapper-content animated fadeInUp" style="width:85%;margin:0 auto;margin-top: 80px;">
    	<div class="row">
        	<div class="col-sm-3 " style=" "  >
        		<div class="ibox">
        			<c:if test="${sessionScope.user!=null }">
	        			<div class="ibox-title">
		        			<h5>我的标签</h5>
	                    </div>
		        		<div class="ibox-content" style="padding:0px 0px 10px 10px">
	                        <div id="label-list">
	                        	<button class="btn btn-white btn-xs margin-top" name="123" type="button">速比涛</button>
	                        	<button class="btn btn-white btn-xs margin-top" name="eeee" type="button">速比涛</button>
	                        	<button class="btn btn-white btn-xs margin-top" name="vvvv" type="button">速比涛</button>
	                        	<button class="btn btn-white btn-xs margin-top" name="1vvvv23" type="button">速比涛</button>
	                        	<button class="btn btn-white btn-xs margin-top" name="ttt" type="button">速比涛</button>
	                        	
	                        	
	                        </div>
	                 	</div>
	                 	<div style="margin-top:25px"></div>
                 	</c:if>
        			<div class="ibox-title" >
        			
	        			<h5>标签</h5>
                    </div>
	        		<div class="ibox-content" style="padding:0px 0px 10px 10px">
                        <div id="label-list">
                        	<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
                        	<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
                        	<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
                        	<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
                        	<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
                        	<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
                        	
                        	
                        </div>
                 	</div>
        		</div>
        	</div>
        	<div class="col-sm-8"  style="display: hidden;margin-left:0% ">
        		<div id="index-blog">
		       		
		       		<c:forEach items="${bloglist.list }" var="blog">
						<div class="ibox">
							<div class="ibox-title">
								<span class="label label-primary pull-right">NEW</span>
								<h5><a id="" href="getBlogContent?serialId=${blog.serial_id }" target="view_window" >${blog.blog_title }</a></h5>
							</div>
							<div class="ibox-content" style="padding:10px">
								<div class=" blog_tit_img search-query" style="position:relative;">
									<img alt="" src="${blog.req_url }">
									<span style="position:absolute; margin-left:10px; bottom:10px; color:white">
										<h3>${blog.blog_title}</h3></span>
								</div>
								<div style="margin-top: 20px">
									<!-- 
									 ${blog.blog_title}
									 -->
									<!-- 平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。 -->
								</div>
								<div class="feed-element">
										<!-- 分割 -->
										<div class="progress progress-mini" style="height:2px">
											<div class="progress-bar"></div></div>
										<div class="" style="margin-top: 15px">
											<a href="" class="pull-left">
												<img alt="image" class="img-circle" src="img/profile.jpg"></a>
											<div class="media-body ">
												<strong>${blog.user_name }</strong>
												<br>
												<div class="pull-right">
													<a href="getBlogContent?serialId=${blog.serial_id }">
														<button type="button" class="btn btn-outline btn-primary btn-xs">阅读全文</button>
													</a>
												</div>
												<small class="text-muted">${blog.update_time}</small></div>
										</div>
								</div>
							</div>
						</div>
					</c:forEach>
				</div>
				<div class="ibox">
					<button class="btn btn-primary btn-block  ">
						<div  class="sk-spinner sk-spinner-three-bounce block-hide " id="loading-style"  >
	                               <div class="sk-bounce1"></div>
	                               <div class="sk-bounce2"></div>
	                               <div class="sk-bounce3"></div>
	                       </div>
						<div  id="index-loading-more">
							<i class="fa fa-arrow-down"></i>显示更多
						</div>
						<div>
						<input type="hidden" class="curr-page" value="${bloglist.pageNumber}">
						<input type="hidden" class="count-page" value="${bloglist.totalPage }">
						</div>
					</button>
				</div>
			</div>
			
        </div>
	</div>
    <footer>
         <div class="container">
         
            <div class="copy text-center">
               Copyright 2017 <a href='#'>lexy's blog</a>
            </div>
            
         </div>
    </footer>
	<div id="modal-form" class="modal inmodal fade"  role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-7 b-r">
                            <h3 class="m-t-none m-b">登录</h3>

                            <p>欢迎登录本站(⊙o⊙)</p>

                            
                        <form role="form"  id="loginForm" >
                                <div class="form-group">
                                    <label>用户名：</label>
                                    <input id="cname" name="name" placeholder="请输入用户名" class="form-control" required="" aria-required="true">
                                </div>
                                <div class="form-group">
                                    <label>密码：</label>
                                    <input id="cpwd" name="pwd"type="password" placeholder="请输入密码" class="form-control" required="" aria-required="true">
                                </div>
                                <div>
                                    <button id="sign-btn" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button" ><strong>登录</strong>
                                    </button>
                                   <label class="">
                                        <div class="icheckbox_square-green" style="position: relative;"><input type="checkbox" class="i-checks" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                                        	自动登录
                               		</label>
                                </div>
                        </form>
                        </div>
                        <div class="col-sm-5">
                            <h4>还不是会员？</h4>
                            <p>您可以注册一个账户</p>
                            <p class="text-center">
                                <a href="rec_register.jsp"><i class="fa fa-sign-in big-icon"></i></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 隐藏  -->
    
	<input type="hidden" id="enFlag" value="${enFlag}">    
    
    <!-- 全局js -->
    <script src="<%=pathfile %>/rec/js/jquery-1.8.3.min.js"></script>
    <script src="<%=pathfile %>/rec/js/lens.js"></script>
    <script src="<%=pathfile %>/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="<%=pathfile %>/bac/js/async-ajax.js"></script>
	
	    <!-- jQuery Validation plugin javascript-->
    <script src="<%=pathfile %>/plugins/validate/jquery.validate.min.js"></script>
    <script src="<%=pathfile %>/plugins/validate/messages_zh.min.js"></script>

    <script src="<%=pathfile %>/rec/js/form-validate-rec.js"></script>
	
    <script type="text/javascript">
	  
    	$(function(){
    		
    		$("#sgin-in-model").click(function(){
    			 $('#modal-form').modal('show');
    		});
     		$("#sign-btn").click(function(){
      			/* $("#loginForm").validate({
   	  			  submitHandler: function(form) { alert("OK");
   	  			    
   	  			    
   	  			  	//reqStr = lens.encode(reqStr);
   	  			    // var result = doPost("signIn", reqStr);
   	  			    //if(result.detail.code='200'){
   	  			    //	//window.location.href="";
   	  			    //}
   	  			    return false;
   	  			  }
   	  			}) */
   	  			
   	  			
     			var name = $("#cname").val();
  			    var pwd = $("#cpwd").val();
  			    var reqStr = "{'name':'"+name+"','pwd':'"+pwd+"'}";
  			    console.log($.base64.encode(reqStr));
  			    var enFlagVal = $("#enFlag").val();
  			    if(enFlagVal!=null && enFlagVal!="" && enFlagVal==1){
  			    	reqStr = $.base64.encode(reqStr);
  			    }
  			  	var result = doPost("signIn", reqStr);
	  			if(result.detail.code='200'){
	  				window.location.href="";
	  			}
     		});
    		$("#sgin-out").click(function(){
    			var result = doPost("sginOut", "");
    			if(result.detail.code='200'){
    				window.location.href="";
    			}
    		});
    		
    		$("#label-list button").click(function(){
    			
    			var clazzVal = $(this).attr("class");
    			if(clazzVal.indexOf("btn-white")){
	    			$("button[class='btn btn-xs margin-top btn-primary']").attr("class","btn btn-white btn-xs margin-top");
    				$(this).removeClass("btn-white");
        			$(this).addClass("btn-primary");
    			}
    		})
    		
    		
    		$("#index-loading-more").click(function(){
    			getBlogMore();
    		})
    		
    		
    		
    	})
    	
    	
    	
    	
    	
    	function getBlogMore(){
    		var currPage = $(".curr-page").val();
			var countPage = $(".count-page").val();
			if(currPage==countPage ){
				alert("没有更多了.....");
			}
			var tagVal = $(".btn.btn-xs.margin-top.btn-primary").attr("name");
			
			$("#index-loading-more").addClass("block-hide");
			$("#loading-style").removeClass("block-hide");
			
			var reqStr = {
					"pageNum":parseInt(currPage)+1,
		            "tagVal":tagVal
		        };
			var result = doPostDiy("getBlogContentList", reqStr);
			var bloglist = result.detail.bloglist;
			if(bloglist.list.length>0){
				blogBoxHtml(bloglist.list);
				$(".curr-page").val(bloglist.pageNumber);
				$(".count-page").val(bloglist.totalPage);
				$("#index-loading-more").removeClass("block-hide");
				$("#loading-style").addClass("block-hide");
			}
    	}
    	
    	function blogBoxHtml(bloglist){
    		var iboxHtml = "";
    		for(var i = 0 ; i < bloglist.length ; i++ ){
    			var obj = bloglist[i];
    			iboxHtml += "<div class='ibox'><div class='ibox-title'><span class='label label-primary pull-right'></span><h5>";
    			iboxHtml += "<a id=' href='getBlogContent?serialId="+obj.serial_id+"' target='view_window'>"+obj.blog_title+"</a>";
    			iboxHtml += "</h5></div><div class='ibox-content' style='padding:15px'><div class=' blog_tit_img search-query' style='position:relative;'>";
    			iboxHtml += "<img alt='cover-pic' src='"+obj.req_url+"'>";
    			iboxHtml += "<span style='position:absolute; margin-left:10px; bottom:10px; color:white'>";
    			iboxHtml += "<h3>"+obj.blog_title+"</h3></span></div><div style='margin-top: 20px'></div><div class='feed-element'>";
    			iboxHtml += "<div class='progress progress-mini' style='height:2px'><div class='progress-bar'></div></div><div class=' style='margin-top: 15px'>";
    			iboxHtml += "<a href=' class='pull-left'><img alt='image' class='img-circle' src='img/profile.jpg'></a><div class='media-body '>";
    			var read_more = "<a href='getBlogContent?serialId="+obj.serial_id+"'><button type='button' class='btn btn-outline btn-primary btn-xs'>阅读全文</button></a>";
    			iboxHtml += "<strong>"+obj.update_user_no+"</strong><br><div class='pull-right'>"+read_more+"</div><small class='text-muted'>"+obj.update_time+"</small></div></div></div></div></div>";
    		}
    		$("#index-blog").append(iboxHtml);
    	}
    	
    
    </script>
</body>
</html>